<template>
  <materialdetail :detaiRow="detaiRow" @changeDetailVisible="changeDetailVisible"  v-if="detailVisible"/>
  <div v-else class="project zy-content ">
    <div class="title">
      <span>物料维护</span>
      <div class="icon">
        <span class="creatBtnright" @click="addList">
          <span><Icon type="ios-add-circle" color="#187BDB" /></span>
          <span class="rightbtn">添加</span>
        </span>
      </div>
    </div>
    <Form :label-width="120" class="search-form">
      <Row>
        <Col :span="5">
          <FormItem label="所属公司：">
              <Select
              v-model="searchParams.company"
              filterable
              clearable
              :placeholder="`${$t('common.selectInfo')}`"
          >
            <Option
                v-for="(item) of companyList"
                :value="item.code"
                :key="item.code"
            >{{ item.name }}</Option>
          </Select>
          </FormItem>
        </Col>
        <Col :span="5">
          <FormItem label="物料名称：">
            <Input type="text"
                   v-model="searchParams.maName"
                   clearable
                   :placeholder="`${$t('common.inputInfo')}`"
                   class="inputBorder"
                   ></Input>
          </FormItem>
        </Col>
        <Col :span="5">
          <FormItem label="物料编码：">
            <Input type="text"
                   v-model="searchParams.maCode"
                   clearable
                   :placeholder="`${$t('common.inputInfo')}`"
                   class="inputBorder"
                   ></Input>
          </FormItem>
        </Col>
        <Col :span="4" align="center">
          <Button type="primary" @click="searchListbtn">{{$t('common.Query')}}</Button>
        </Col>
      </Row>
    </Form>
    <div class="btns clear">
        <span  class="creatBtnright" @click="onExport('exprtAll')">
              <span><Icon type="ios-cloud-download-outline" /></span>
              <span class="rightbtn">{{$t('common.batchExport')}}</span>
          </span>
          <span  class="creatBtnright" @click="onExport('template')">
              <span><Icon type="ios-cloud-download-outline" /></span>
              <span class="rightbtn">导出模板</span>
          </span>
      <span  class="creatBtnright" @click="importExcelState = true">
              <span><Icon type="ios-cloud-upload-outline" /></span>
              <span class="rightbtn">导入</span>
          </span>
    </div>
    <div class="tableContent">
      <Table class="recycleBinTable"
             ellipsis
             ref="selection"
             :columns="tableColumns"
             :data="tableData"
             @on-selection-change="onSelectChange">
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" @click="lookClick(row)">{{$t('common.Check')}}</span>
          <span class="operationBtn" @click="addList(row)">{{$t('common.Edit')}}</span>
          <span class="operationBtn" @click="handleDelete(row)">{{$t('common.Delete')}}</span>
        </template>
      </Table>
    </div>
    <div class="pageWrap">
      <Page :total="total"
            :page-size="pageSize"
            :page-size-opts="pageSizeOption"
            :current="pageNum"
            @on-change="changePageNum"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total />
    </div>

    <Modal :mask-closable="false"
        v-model="processVisible"
        :title="textInfo"
    >
      <Form class="formList"
            ref="processForm"
            :model="formItem"
            :label-width="100"
            style="padding: 0 15px;"
            >
        <FormItem class="name" label="所属公司：" prop="company">
          <Select
              v-model="formItem.company"
              filterable
              clearable
              :placeholder="`${$t('common.selectInfo')}`"
          >
            <Option
                v-for="(item) of companyList"
                :value="item.code"
                :key="item.code"
            >{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem class="name" label="物料名称：" prop="maName">
          <Input type="text"
                 v-model="formItem.maName"
                 :placeholder="`${$t('common.inputInfo')}`"
                 class="inputBorder" ></Input>
        </FormItem>
        <FormItem class="name" label="物料编码：" prop="maCode">
          <Input type="text"
                 v-model="formItem.maCode"
                 :placeholder="`${$t('common.inputInfo')}`"
                 class="inputBorder" ></Input>
        </FormItem>
        <FormItem class="name" label="规则型号：" prop="maModel">
          <Input type="text"
                 v-model="formItem.maModel"
                 :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                 ></Input>
        </FormItem>
        <FormItem class="name" label="单价：" prop="maPrice">
          <Input type="text"
                 v-model="formItem.maPrice"
                 :placeholder="`${$t('common.inputInfo')}`"
                 class="inputBorder" ></Input>
        </FormItem>
<!--        <FormItem class="name" label="创建时间：" prop="yrmon">-->
<!--          <Date-picker type="month"-->
<!--                       v-model="formItem.yrmon"-->
<!--                       format="yyyy-MM"-->
<!--                       placeholder="选择月"/>-->
<!--        </FormItem>-->
        <FormItem label="基本单位：" prop="maUnit">
          <Input type="text"
                 v-model="formItem.maUnit"
                 :placeholder="`${$t('common.inputInfo')}`"
                 class="inputBorder" ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default"  @click="processVisible = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary" :loading="loading"  @click="handleOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <import-excel :importExcelStateF="importExcelState"
                  v-if="importExcelState"
                  @importExcelChange="importExcelChange"/>
  </div>
</template>

<script>
import moment from 'moment'
import ImportExcel from "@/components/importExcel";
import materialdetail from "./materialdetail";
import fileDownload from "js-file-download";
export default {
  name: "recycleBin",
  components: {
    ImportExcel,
    materialdetail
  },
  data() {
    return {
      detaiRow:{},
      detailVisible:false,
      importExcelState: false,
      loading:false,
      formItem:{
        maCode:'',
        // yrmon:'',
        maName:'',
        maModel:'',
        maPrice:'',
        company:'',
        maUnit:'',
      },
      processVisible:false,
      textInfo:'',
      searchParams:{
        company:'',
        maCode:'',
        maName:''
      },
      tableData:[],
      tableColumns:[
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
         title: `${ this.$t('preliminary.Entity') }`,
          key: 'company',
          align: 'center',
          minWidth: 200,
        },
        {
          title: '物料名称',
          key: 'maName',
          align: 'center',
          minWidth: 200,
        },
        {
          title: '物料编码',
          key: 'maCode',
          align: 'center',
          minWidth: 200,
        },
        {
          title: '物料类型',
          key: 'maModel',
          align: 'center',
          minWidth: 200,
        },
        {
          title: '单价',
          key: 'maPrice',
          align: 'center',
          minWidth: 200,
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          minWidth: 200,
        },
        {
          title: '基本单位',
          key: 'maUnit',
          align: 'center',
          minWidth: 200,
        },
        {
          title: `${ this.$t('common.operation') }`,
          slot: "action",
          width: 220,
          align: 'center',
          minWidth: 220,
          fixed: 'right'
        }
      ],
      companyList:[],
      selectTable:[],
      editStatus:false,
      pageNum:1,
      pageSize:10,
      total:0,
      targetId:'',
      pageSizeOption: [10,20,30,40],
    }
  },

  mounted() {
    this.searchList()
    this.getCompany()
  },
  methods: {
    getCompany(){
      this.axios({
        method: 'get',
        url: '/basic/company/getCompanyListByUser'
      }).then((res)=>{
        if (res.code === 200){
          this.companyList = res.data
          // const obj = this.paramsList.find(val=>val.label ==='所属公司')
          // obj.enumList = res.data.map(val=>({
          //   id:val.code,
          //   name:val.name
          // }))
        }
      })
    },
    changeDetailVisible(val){
      this.detailVisible = val
    },
    lookClick(row){
      this.detaiRow = row
      this.detailVisible = true
    },
    onExport(val) {
      let filName = ''
      let paramsInfo = {
        url:'/workorder/workorderTool/template',
        responseType: 'blob'
      }
      if (val === 'template'){
        paramsInfo.method = 'get'
        for (let key in this.searchParams) {
          if (this.searchParams[key]) {
            this.$set(paramsInfo.params, key, this.searchParams[key])
          }
        }
         filName = '物料维护模板'
      }else {
        if (!(this.selectTable && this.selectTable.length)){
          this.$Message.error('请勾选导出项!')
          return
        }
        filName = `物料维护${moment().format('YYYY-MM-DD')}`
        paramsInfo.method = 'post'
        paramsInfo.url = '/workorder/workorderTool/export'
        const ids = this.selectTable.map(val=>val.id)
        paramsInfo.data = {
          ids,
          maCode:this.searchParams.maCode,
          maName:this.searchParams.maName
        }
      }
      this.axios(paramsInfo).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    importExcelChange(val) {
      this.importExcelState = false;
      if(val==='success'){
        this.changeNum();
      }
    },
    changeNum(){
      this.pageNum = 1;
      this.searchList();
    },
    handleOk(){
      if (!this.formItem.company) {
        this.$Message.warning('请选择所属公司');
        return false;
      }

      if (!this.formItem.maName) {
        this.$Message.warning('请填写物料名称');
        return false;
      }
      if (!this.formItem.maCode) {
        this.$Message.warning('请填写物料编码');
        return false;
      }
      if (!this.formItem.maModel) {
        this.$Message.warning('请填写规格型号');
        return false;
      }
      if (this.formItem.maPrice === '') {
        this.$Message.warning('请填写单价');
        return false;
      }
      if (!this.formItem.maUnit) {
        this.$Message.warning('请填写单位');
        return false;
      }
      // if (!this.formItem.yrmon) {
      //   this.$Message.warning('请选择创建时间');
      //   return false;
      // }

      this.loading = true
      const data = {
        maCode:this.formItem.maCode,
        // yrmon:moment(this.formItem.yrmon).format('yyyyMM'),
        maName:this.formItem.maName,
        maModel:this.formItem.maModel,
        maPrice:this.formItem.maPrice,
        maUnit:this.formItem.maUnit,
        werks:this.formItem.company
      }
      let url = '/workorder/workorderTool/insertWl'
      if (this.editStatus){
        url = '/workorder/workorderTool/updateWl'
        data.id = Number(this.targetId)
      }
      this.axios({
        method: 'post',
        url,
        data
      }).then(res=>{
       if (res.code === 200){
         this.searchList()
       }else {
         this.$Message.error(res.msg)
       }
       this.processVisible = false
        this.loading = false
      })
    },

    addList(row){
      this.editStatus = false
      this.targetId = ''
      this.textInfo = '新增'
      if (row.id){
        this.textInfo = '编辑'
        this.editStatus = true
        this.targetId = row.id
        this.formItem = {
              maCode:row.maCode,
              // yrmon:row.yrmon,
              maName:row.maName,
              maModel:row.maModel,
              maPrice:row.maPrice,
              company:row.werks,
              maUnit:row.maUnit
        }
      }else {
        this.formItem = {}
      }
     this.processVisible = true
    },
    handleDelete(row){
      const params = {
        id:Number(row.id)
      }
      this.axios({
        method: 'get',
        url: '/workorder/workorderTool/deleteWl',
        params
      }).then(res=>{
        if (res.code === 200){
          this.searchList()
        }else {
          this.$Message.error(res.msg)
        }
      })
    },
    handleEdit(){},
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val){
      this.pageNum = val;
      this.searchList();
    },
    onSelectChange(val) {
      this.selectTable = val
    },
    searchListbtn(){
      this.pageNum = 1
      this.searchList()
    },
    searchList(){
      const params = {
        pageNo:this.pageNum,
        pageSize:this.pageSize,
        maCode:this.searchParams.maCode,
        maName:this.searchParams.maName,
        werks:this.searchParams.company
      }
      this.axios({
        method: 'get',
        url: '/workorder/workorderTool/queryWlList',
        params
      }).then(res=>{
        if (res.code === 200){
          this.tableData = res.data.record
          this.total = res.data.total
        }
      })
    },
  }

}
</script>

<style scoped lang="scss">
.project{
  //background: #ffffff;
  height: calc(100vh - 150px);
  .title{
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    .icon {
      display: flex;
      .creatBtnright {
        display: flex;
        align-items: center;
        font-size: 16px;
        i {
          font-size: 36px;
        }
      }
    }
  }
}

</style>
<style lang="scss">
  .name{
    .ivu-form-item-label {
      display: block;
      // line-height: 20px;
      &:before {
        content: '*';
        display: inline-block;
        clear: both;
        position: relative;
        top: 2px;
        left: -4px;
        color: #ff0000;
      }
    }
  }

</style>
